<template>
  <div class="bg">
    <el-row style="margin: 0px" :gutter="24">
      <el-col style="padding: 0px" class="login-box" :span="6" :offset="9">
        <div class="font">
          课程管理系统
        </div>
        <div class="inp-for">
          <el-input class="inp" placeholder="学号|工号|账号" v-model="loginForm.username">
            <template slot="prepend">
              <i class="el-icon-user-solid"></i>
            </template>
          </el-input>
          <el-input class="inp" placeholder="密码" v-model="loginForm.password">
            <template slot="prepend">
              <i class="el-icon-edit"></i>
            </template>
          </el-input>
          <div class="login-sty">
            <el-radio-group v-model="loginForm.type">
              <el-radio style="color: white" :label="0">学生</el-radio>
              <el-radio style="color: white" :label="1">老师</el-radio>
              <el-radio style="color: white" :label="2">管理员</el-radio>
            </el-radio-group>
          </div>
          <div>
            <el-button
              style="width: 100%"
              @click="doLogin" type="primary"
              element-loading-text="玩命登陆中，请稍后"
              v-loading.fullscreen.lock="fullscreenLoading" >
                登录
            </el-button>
          </div>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>

  import {post} from "../common/request";
  import jwt_decode from 'jwt-decode';

  export default {
    name: "Login",
    data() {
      return {
        loginForm: {
          username: '811010001',
          password: '123456',
          type: 0
        },
        fullscreenLoading: false
      }
    },
    methods: {
      openFullScreen1() {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 2000);
      },
      doLogin() {

        this.fullscreenLoading=true;

        let _this = this;
        post("/systems/login", _this.loginForm).then(res => {
          if (res.code == 1) {

            this.fullscreenLoading = false;

            let jwtDecode = jwt_decode(res.data);

            console.log(jwtDecode)

            //显示信息
            this.$message.success(res.msg);

            let user = {
              userId: jwtDecode.jti,
              username: jwtDecode.sub,
              type: jwtDecode.type
            };

            // 保存token数据,方便发送后台进行验证
            _this.$store.dispatch('asyncUpdateToken', res.data);
            // 保存用户数据
            _this.$store.dispatch('asyncUpdateUser', user);
            // 保存浏览器本地存储空间
            sessionStorage.setItem('state', JSON.stringify(_this.$store.state));

            console.log(this.$store.getters.getToken);
            // console.log(_this.$store.getters.getUser.username);

            _this.$router.push({
              path: "Home"
            })
          } else {
            //提示登录失败信息
            this.$message.error(res.msg);
            this.fullscreenLoading = false;
          }
        })
      }
    }
  }
</script>

<style scoped>

  .bg {
    background-image: url("../assets/1.jpeg");
    /*background-size: 130%;*/
    height: 100%;
  }

  .login-box {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    margin-top: 150px;
  }

  .login-box > .font {
    color: white;
    font-size: 25px;
    margin: 15px 0px;
  }

  .login-box > .inp-for {
    padding: 15px 25px;
    border-top: white solid 1px;
  }

  .login-box > .inp-for > .inp {
    margin: 10px 0;
  }

  .login-box .login-sty {
    margin: 15px 0;
  }
</style>
